<template>
    <div>
        <mj-title type="h2" title="Form 表单"></mj-title>
        <div class="page-desc">具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</div>

        <mj-title type="h5" title="基础使用"></mj-title> 
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form style="width:500px;">
                    <mj-form-item label="用户名">
                        <mj-input placeholder="请输入用户名" v-model="model.username"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="密码">
                        <mj-input placeholder="请输入密码" :show-eye="true" value="请输入密码" type="password"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="Switch">
                        <mj-switch v-model="model.active"></mj-switch>
                    </mj-form-item>
                    <mj-form-item label="单选：">
                        <mj-radio-group :data="radioData" v-model="radioGroupValue"></mj-radio-group>
                    </mj-form-item>
                    <mj-form-item label="多选：">
                        <mj-checkbox-group v-model="checkbox1" :data="groupData"></mj-checkbox-group>
                    </mj-form-item>
                    <mj-form-item label="Textarea">
                        <mj-input placeholder="请输入" type="textarea" :max-length="100"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="">
                        <mj-button type="primary">Submit</mj-button>
                        <mj-button>Cancel</mj-button>
                    </mj-form-item>
                </mj-form>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-form>
                            &lt;mj-form-item label="用户名">
                                &lt;mj-input placeholder="请输入用户名" v-model="model.username">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="密码">
                                &lt;mj-input placeholder="请输入密码" :show-eye="true" value="请输入密码" type="password">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="Switch">
                                &lt;mj-switch v-model="model.active">&lt;/mj-switch>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="Radio">
                                &lt;mj-radio-group :data="radioData" v-model="radioGroupValue">&lt;/mj-radio-group>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="Checkbox">
                                &lt;mj-checkbox-group v-model="checkbox1" :data="groupData">&lt;/mj-checkbox-group>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="Textarea">
                                &lt;mj-input placeholder="请输入" type="textarea" :max-length="100">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="">
                                &lt;mj-button type="primary">Submit&lt;/mj-button>
                                &lt;mj-button>Cancel&lt;/mj-button>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                    model: {
                                        username: 'Jay',
                                        active: false,
                                    },
                                    radioData: [
                                        {text: '男', value: '0'},
                                        {text: '女', value: '1'}
                                    ],
                                    radioGroupValue: '1',
                                    checkbox1: [],
                                    groupData: [
                                        {label:'美食',value: '美食'},
                                        {label:'游戏',value: '游戏'}
                                    ],
                                }
                            }
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="对齐方式"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb30">
                    <mj-radio-group :data="radioData2" v-model="labelPosition" type="button"></mj-radio-group>
                </div>
                <mj-form :label-position="labelPosition" style="width:500px;">
                    <mj-form-item label="名称：">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="内容：">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="描述：">
                        <mj-input placeholder="请输入" type="textarea"></mj-input>
                    </mj-form-item>
                </mj-form>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-radio-group :data="radioData2" v-model="labelPosition" type="button">&lt;/mj-radio-group>
                        &lt;mj-form :label-position="labelPosition">
                            &lt;mj-form-item label="名称：">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="内容：">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="描述：">
                                &lt;mj-input placeholder="请输入" type="textarea">&lt;/mj-input>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                      export default {
                        data() {
                          return {
                            radioData2: [
                                {text: '左对齐', value: 'left'},
                                {text: '右对齐', value: 'right'},
                                {text: '顶部对齐', value: 'top'},
                            ],
                            labelPosition: 'left',
                          };
                        }
                      }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="表单验证"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form :rules="rules" ref="ruleForm" v-model="ruleForm" style="width:500px;" @submit.native.prevent>
                    <mj-form-item prop="age" label="年龄">
                        <mj-input v-model="ruleForm.name" placeholder="请输入用户名"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="密码" prop="password">
                        <mj-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="mobile">
                        <div slot="label">手机号</div>
                        <mj-input v-model="ruleForm.mobile"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="mail" label="邮箱">
                        <mj-input v-model="ruleForm.mail"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="digits" label="digits">
                        <mj-input v-model="ruleForm.digits"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="number" label="number">
                        <mj-input v-model="ruleForm.number"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="tel" label="tel">
                        <mj-input v-model="ruleForm.tel"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="radio" prop="radio">
                       <mj-radio-group v-model="ruleForm.radio" :data="radioData"></mj-radio-group>
                    </mj-form-item>
                    <mj-form-item label="checkbox" prop="checkboxGroup">
                        <mj-checkbox-group v-model="ruleForm.checkboxGroup" :data="groupData"></mj-checkbox-group>
                    </mj-form-item>
                    <mj-form-item prop="select" label="select">
                        <mj-select :option="options" v-model="ruleForm.select"></mj-select>
                    </mj-form-item>
                    <mj-form-item label="textarea" prop="textarea">
                        <mj-input v-model="ruleForm.textarea" type="textarea" placeholder="请输入内容"></mj-input>
                    </mj-form-item>
                    <mj-form-item label="switch" prop="switch">
                        <mj-switch v-model="ruleForm.switch"></mj-switch>
                    </mj-form-item>
                    <mj-form-item>
                        <mj-button @click="submitForm" type="primary" native-type="submit">提交</mj-button>
                        <mj-button @click="submitForm2" type="primary">仅对用户名密码验证</mj-button>
                        <mj-button @click="resetForm">重置表单</mj-button>
                    </mj-form-item>
                </mj-form>
                <ul class="page-list">
                    <li>Form 组件提供了表单验证的功能，只需要通过 <code>rules</code> 属性传入约定的验证规则，并将 Form-Item 的 <code>prop</code> 属性设置为需校验的字段名即可。</li>
                </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;mj-form :rules="rules" ref="ruleForm" v-model="ruleForm">
                        &lt;mj-form-item prop="age" label="年龄">
                            &lt;mj-input v-model="ruleForm.name" placeholder="请输入用户名">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item label="密码" prop="password">
                            &lt;mj-input v-model="ruleForm.password" placeholder="请输入密码" type="password">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="mobile">
                            &lt;div slot="label">手机号&lt;/div>
                            &lt;mj-input v-model="ruleForm.mobile">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="mail" label="邮箱">
                            &lt;mj-input v-model="ruleForm.mail">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="digits" label="digits">
                            &lt;mj-input v-model="ruleForm.digits">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="number" label="number">
                            &lt;mj-input v-model="ruleForm.number">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="tel" label="tel">
                            &lt;mj-input v-model="ruleForm.tel">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item label="radio" prop="radio">
                           &lt;mj-radio-group v-model="ruleForm.radio" :data="radioData">&lt;/mj-radio-group>
                        &lt;/mj-form-item>
                        &lt;mj-form-item label="checkbox" prop="checkboxGroup">
                            &lt;mj-checkbox-group v-model="ruleForm.checkboxGroup" :data="groupData">&lt;/mj-checkbox-group>
                        &lt;/mj-form-item>
                        &lt;mj-form-item prop="select" label="select">
                            &lt;mj-select :option="options" v-model="ruleForm.select">&lt;/mj-select>
                        &lt;/mj-form-item>
                        &lt;mj-form-item label="textarea" prop="textarea">
                            &lt;mj-input v-model="ruleForm.textarea" type="textarea" placeholder="请输入内容">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-form-item label="switch" prop="switch">
                            &lt;mj-switch v-model="ruleForm.switch">&lt;/mj-switch>
                        &lt;/mj-form-item>
                        &lt;mj-form-item>
                            &lt;mj-button @click="submitForm" type="primary">提交&lt;/mj-button>
                            &lt;mj-button @click="submitForm2" type="primary">仅对用户名密码验证&lt;/mj-button>
                            &lt;mj-button @click="resetForm">重置表单&lt;/mj-button>
                        &lt;/mj-form-item>
                    &lt;/mj-form>
                    &lt;script>
                    export default {
                      data () {
                        return {
                          ruleForm: {
                            name: '',
                            password: '',
                            mobile: '',
                            mail: '',
                            digits: '',
                            number: '100.00',
                            tel: '',
                            city: '',
                            area: '',
                            cascader: [],
                            select: '',
                            checkbox: false,
                            checkboxGroup: [],
                            switch: false,
                            textarea: '',
                            radio: '',
                            datePicker:''
                          },
                          rules: {
                            name: [
                              {type: 'required', msg: '请输入用户名'},
                              {type: 'maxLength', len: 6, msg: '最大6个字符'},
                              {type: 'minLength', len: 3, msg: '不能小于3'}
                            ],
                            password: [
                              {type: 'required', msg: '请输入密码'}
                            ],
                            mobile: [
                              {type: 'required', msg: '请输入手机号'},
                              {type: 'mobile', msg: '手机号格式不正确'}
                            ],
                            mail: [
                              {type: 'mail', msg: '邮箱格式不正确'}
                            ],
                            digits: [
                              {type: 'digits', msg: '只能输入正整数'}
                            ],
                            number: [
                              {type: 'number', msg: '只能输入数字'}
                            ],
                            tel: [
                              {type: 'tel', msg: '电话号码格式不正确'}
                            ],
                            city: [
                              {type: 'required', msg: '城市不能为空'}
                            ],
                            area: [
                              {type: 'required', msg: '地区不能为空'}
                            ],
                            select: [
                              {type: 'required', msg: '下拉不能为空'}
                            ],
                            checkbox: [
                              {type: 'required', msg: '必须同意协议'}
                            ],
                            checkboxGroup: [
                              {type: 'required', msg: '请选择爱好'}
                            ],
                            switch: [
                              {type: 'required', msg: 'switch请按选择'}
                            ],
                            textarea: [
                              {type: 'required', msg: 'textarea不能为空'}
                            ],
                            radio: [
                              {type: 'required', msg: 'radio不能为空'}
                            ],
                            datePicker: [
                              {type: 'required', msg: '请选择日期'}
                            ]
                          },
                          radioData: [
                            {text: '男', value: '0'},
                            {text: '女', value: '1'}
                          ],
                            groupData: [
                                {label:'美食',value: '美食'},
                                {label:'游戏',value: '游戏'}
                            ],
                        }
                      },
                      components: {},
                      methods: {
                        submitForm () {
                          this.$refs.ruleForm.validate()
                            .then(res => {
                              console.log('通过验证')
                              console.log(res)
                            })
                            .catch(res => {
                              console.log('不通过')
                              console.log(res)
                            })
                        },
                        submitForm2 () {
                          const props = ['name', 'password']
                          this.$refs.ruleForm.validate(props)
                            .then(res => {
                              console.log('通过验证')
                              console.log(res)
                            })
                            .catch(res => {
                              console.log('不通过')
                              console.log(res)
                            })
                        },
                        resetForm () {
                          this.$refs.ruleForm.resetFields()
                        }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="回调验证"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form :rules="backRules" v-model="backForm" ref="backForm" label-width="80px" style="width:300px;">
                    <mj-form-item prop="password1" label="密码">
                        <mj-input v-model="backForm.password1"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="password2" label="确认密码">
                        <mj-input v-model="backForm.password2"></mj-input>
                    </mj-form-item>
                    <mj-form-item>
                        <mj-button @click="submitBackForm" type="primary">提交</mj-button>
                    </mj-form-item>
                </mj-form>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                       &lt;mj-form :rules="backRules" v-model="backForm" ref="backForm" label-width="80px">
                            &lt;mj-form-item prop="password1" label="密码">
                                &lt;mj-input v-model="backForm.password1">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item prop="password2" label="确认密码">
                                &lt;mj-input v-model="backForm.password2">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item>
                                &lt;mj-button @click="submitBackForm" type="primary">提交&lt;/mj-button>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                    export default {
                      data () {
                        return {
                          backForm: {
                            password1: '',
                            password2: ''
                          },
                          backRules: {
                            password1: [
                              {type: 'required', msg: '密码不能为空'}
                            ],
                            password2: [
                              {type: 'required', msg: '密码不能为空'},
                              {
                                type: 'fn',
                                msg: '两次输入的密码不一致',
                                validator: value => {
                                  if (value === this.backForm.password1) {
                                    return true
                                  } else {
                                    return false
                                  }
                                }
                              }
                            ]
                          }
                        }
                      }
                      methods: {
                          submitBackForm () {
                            this.$refs.backForm.validate()
                              .then(res => {
                                console.log('通过验证')
                                console.log(res)
                              })
                              .catch(res => {
                                console.log('不通过')
                                console.log(res)
                              })
                          }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义验证规则"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form :rules="rules4" v-model="form4" ref="form4" label-width="60px" style="width:300px;">
                    <mj-form-item prop="age" label="年龄">
                        <mj-input v-model="form4.age"></mj-input>
                    </mj-form-item>
                </mj-form>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-form :rules="rules4" v-model="form4" ref="form4" label-width="60px">
                            &lt;mj-form-item prop="age" label="年龄">
                                &lt;mj-input v-model="form4.age">&lt;/mj-input>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                    export default {
                      data () {
                        return {
                          form4: {
                            age: ''
                          },
                          rules4: {
                            age: [
                              {type: 'required', msg: '年龄不能为空'},
                              {type: 'rule', msg: '年龄必须大于1岁，且不能超过120岁', rule: '/^(?:[1-9][0-9]?|1[01][0-9]|120)$/'}
                            ]
                          }
                        }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="单独使用formItem"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form-item label="年龄" ref="setTips" style="width:300px;">
                    <mj-input v-model="form5"></mj-input>
                </mj-form-item>
                <mj-button @click="submitForm3" type="primary">设置验证信息</mj-button>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-form-item label="年龄" ref="setTips">
                            &lt;mj-input v-model="form5">&lt;/mj-input>
                        &lt;/mj-form-item>
                        &lt;mj-button @click="submitForm3" type="primary">设置验证信息&lt;/mj-button>
                    &lt;/template>

                    &lt;script>
                    export default {
                      data () {
                        return {
                          form5: '5'
                        }
                      },
                      methods:{
                        submitForm3() {
                          this.$refs.setTips.setTips('tips','输入提示')
                        }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="快速验证"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-form ref="quickForm" style="width:500px;">
                    <mj-form-item prop="password1" label="邮箱" verify="mail">
                        <mj-input v-model="form6.name"></mj-input>
                    </mj-form-item>
                    <mj-form-item prop="password2" label="确认密码" verify="required,digits">
                        <mj-input v-model="form6.password"></mj-input>
                    </mj-form-item>
                </mj-form>
                <mj-button @click="submitForm6" type="primary">按钮提交</mj-button>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-form ref="quickForm">
                            &lt;mj-form-item prop="password1" label="邮箱" verify="mail">
                                &lt;mj-input v-model="form6.name">&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item prop="password2" label="确认密码" verify="required,digits">
                                &lt;mj-input v-model="form6.password">&lt;/mj-input>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                        &lt;mj-button @click="submitForm6" type="primary">按钮提交&lt;/mj-button>
                    &lt;/template>

                    &lt;script>
                    export default {
                      data () {
                        return {
                          form6: {
                           name:'',
                           password:''
                          }
                        }
                      },
                      methods:{
                        submitForm6 () {
                          this.$refs.quickForm.validate()
                          .then(res=>{
                              console.log('通过验证')
                              console.log(res)
                          })
                          .catch(res=>{
                              console.log('不通过')
                              console.log(res)
                          })
                        }
                      }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="column排版"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="tac mb15">
                    <mj-radio-group :data="columnData" v-model="columnValue" type="button"></mj-radio-group>
                </div>
                <mj-form :column="columnValue">
                    <mj-form-item label="input">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="input">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="input">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="input">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item label="input">
                        <mj-input></mj-input>
                    </mj-form-item>
                    <mj-form-item block>
                        <mj-button type="primary">Submit</mj-button>
                        <mj-button>Cancel</mj-button>
                    </mj-form-item>
                </mj-form>
                <ul class="page-list">
                    <li>设置<code>column</code>值来控制form布局列，可设置范围“1、2、3、4、5”，默认为1，可不设置。</li>
                    <li>设置多列后，如某一列需要单独一行撑满，在form-item上设置<code>block</code>属性,</li>
                </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;div class="tac mb15">
                            &lt;mj-radio-group :data="columnData" v-model="columnValue" type="button">&lt;/mj-radio-group>
                        &lt;/div>
                        &lt;mj-form :column="columnValue">
                            &lt;mj-form-item label="input">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="input">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="input">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="input">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item label="input">
                                &lt;mj-input>&lt;/mj-input>
                            &lt;/mj-form-item>
                            &lt;mj-form-item block>
                                &lt;mj-button type="primary">Submit&lt;/mj-button>
                                &lt;mj-button>Cancel&lt;/mj-button>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                columnData: [
                                    {text: '单列', value: '1'},
                                    {text: '一行两列', value: '2'},
                                    {text: '一行三列', value: '3'},
                                    {text: '一行四列', value: '4'},
                                    {text: '一行五列', value: '5'},
                                ],
                                columnValue: '1',
                            }
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Form 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>表单数据对象</td>
                    <td>Object</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>rules</td>
                    <td>表单验证规则</td>
                    <td>Object</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>label-position</td>
                    <td>表单域标签的位置，可选值为 <code>left</code>、<code>right</code>、<code>top</code></td>
                    <td>String</td>
                    <td>right</td>
                </tr>
                <tr>
                    <td>label-width</td>
                    <td>表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值</td>
                    <td>Number</td>
                    <td>80px</td>
                </tr>
                <tr>
                    <td>showMessage</td>
                    <td>是否显示校验错误信息</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>column</td>
                    <td>控制form布局列，可设置范围“1、2、3、4、5”，默认为1，可不设置。</td>
                    <td>Number</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Form methods"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明</th>
                    <th>参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>validate</td>
                    <td>对表单进行校验的方法，promise方法（是否通过验证，未通过时为所有未通过检验的错误提示；通过时返回value值），带参数prop时对指定字段校验</td>
                    <td>callback</td>
                </tr>
                <tr>
                    <td>resetFields</td>
                    <td>对整个表单进行重置，将所有字段值重置为空并移除校验结果</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Form Item 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>prop</td>
                    <td>表单域字段，在使用表单验证时必填写，对应验证规则</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>标签文本</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>是否根据验证规则自动生成必填样式名</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>verify</td>
                    <td>快速验证，支持<code>required</code>, <code>mobile</code>, <code>tel</code>, <code>mail</code>, <code>digits</code>, <code>number</code> 多个用逗号隔开</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>block</td>
                    <td>设置column排版后，单独设置一个元素为块，宽度100%</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Form Rules 验证规则"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>类型</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>required</td>
                    <td>为空</td>
                </tr>
                <tr>
                    <td>maxLength</td>
                    <td>最大字符</td>
                </tr>
                <tr>
                    <td>minLength</td>
                    <td>最小字符</td>
                </tr>
                <tr>
                    <td>mobile</td>
                    <td>手机号格式</td>
                </tr>
                <tr>
                    <td>tel</td>
                    <td>固话</td>
                </tr>
                <tr>
                    <td>phone</td>
                    <td>固话或手机</td>
                </tr>
                <tr>
                    <td>mail</td>
                    <td>邮箱格式</td>
                </tr>
                <tr>
                    <td>digits</td>
                    <td>正整数</td>
                </tr>
                <tr>
                    <td>number</td>
                    <td>数字</td>
                </tr>
                <tr>
                    <td>tips</td>
                    <td>获得焦点且值为空时显示输入提示</td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
export default {
    data () {
        return {
            radioGroupValue: '1',
            password1: '',
            model: {
                username: 'Jay',
                active: false,
            },
            backForm: {
                password1: '',
                password2: ''
            },
            backRules: {
                password1: [
                {type: 'required', msg: '密码不能为空'}
                ],
                password2: [
                {type: 'required', msg: '密码不能为空'},
                {
                    type: 'fn',
                    msg: '两次输入的密码不一致',
                    validator: value => {
                        if (value === this.backForm.password1) {
                            return true
                        } else {
                            return false
                        }
                    }

                }
                ]
            },
            form4: {
                age: ''
            },
            rules4: {
                age: [
                {type: 'required', msg: '年龄不能为空'},
                {type: 'number', msg:'必须是数字'},
                {type: 'rule', msg: '年龄必须大于1岁，且不能超过120岁', rule: '/^(?:[1-9][0-9]?|1[01][0-9]|120)$/'}
                ]
            },
            radioData2: [
                {label: '左对齐', value: 'left'},
                {label: '右对齐', value: 'right'},
                {label: '顶部对齐', value: 'top'},
            ],
            labelPosition: 'left',
            ruleForm: {
                name: '',
                password: '',
                mobile: '',
                mail: '',
                digits: '',
                number: '100.00',
                tel: '',
                city: '',
                area: '',
                cascader: [],
                select: '',
                checkbox: false,
                checkboxGroup: [],
                switch: false,
                textarea: '',
                radio: '0',
                datePicker:''
            },
            rules: {
                name: [
                {type: 'required', msg: '请输入用户名'},
                {type: 'maxLength', len: 6, msg: '最大6个字符'},
                {type: 'minLength', len: 3, msg: '不能小于3'}
                ],
                password: [
                {type: 'required', msg: '请输入密码'}
                ],
                mobile: [
                {type: 'required', msg: '请输入手机号'},
                {type: 'mobile', msg: '手机号格式不正确'}
                ],
                mail: [
                {type: 'mail', msg: '邮箱格式不正确'}
                ],
                digits: [
                {type: 'digits', msg: '只能输入正整数'}
                ],
                number: [
                {type: 'number', msg: '只能输入数字'}
                ],
                tel: [
                {type: 'tel', msg: '电话号码格式不正确'}
                ],
                city: [
                {type: 'required', msg: '城市不能为空'}
                ],
                area: [
                {type: 'required', msg: '地区不能为空'}
                ],
                select: [
                {type: 'required', msg: '下拉不能为空'}
                ],
                checkbox: [
                {type: 'required', msg: '必须同意协议'}
                ],
                checkboxGroup: [
                {type: 'required', msg: '请选择爱好'}
                ],
                switch: [
                {type: 'required', msg: 'switch请按选择'}
                ],
                textarea: [
                {type: 'required', msg: 'textarea不能为空'}
                ],
                radio: [
                {type: 'required', msg: 'radio不能为空'}
                ],
                datePicker: [
                {type: 'required', msg: '请选择日期'}
                ]
            },
            radioData: [
                {label: '男', value: '0'},
                {label: '女', value: '1'}
            ],
            checkbox1: [],
            groupData: [
                {label:'美食',value: '美食'},
                {label:'游戏',value: '游戏'}
            ],
            options: [{
                value: '黄金糕',
                label: '黄金糕'
            }, {
                value: '双皮奶',
                label: '双皮奶',
                disabled: true
            }, {
                value: '蚵仔煎',
                label: '蚵仔煎'
            }, {
                value: '龙须面',
                label: '龙须面'
            }, {
                value: '北京烤鸭',
                label: '北京烤鸭'
            }],
            selectValue1: '',
            form5: '5',
            form6: {
                name:'',
                password:''
            },
            columnData: [
                {label: '单列', value: '1'},
                {label: '一行两列', value: '2'},
                {label: '一行三列', value: '3'},
                {label: '一行四列', value: '4'},
                {label: '一行五列', value: '5'},
            ],
            columnValue: '1',
        }
    },
    methods: {
        submitBackForm () {
            this.$refs.backForm.validate()
            .then(res => {
                console.log('通过验证')
                console.log(res)
            })
            .catch(res => {
                console.log('不通过')
                console.log(res)
            })
        },
        submitForm () {
            this.$refs.ruleForm.validate()
            .then(res => {
                console.log('通过验证')
                console.log(res)
            })
            .catch(res => {
                console.log('不通过')
                console.log(res)
            })
        },
        submitForm2() {
            const props = ['name', 'password']
            this.$refs.ruleForm.validate(props)
            .then(res => {
                console.log('通过验证')
                console.log(res)
            })
            .catch(res => {
                console.log('不通过')
                console.log(res)
            })
        },
        resetForm () {
            this.$refs.ruleForm.resetFields()
        },
        submitForm3() {
            this.$refs.setTips.setTips('tips','输入提示')
        },
        submitForm6 () {
            this.$refs.quickForm.validate()
            .then(res=>{
                console.log('通过验证')
                console.log(res)
            })
            .catch(res=>{
                console.log('不通过')
                console.log(res)
            })
        }
    },
}
</script>